<template>
  <div class="tab-container">
    <van-tabs v-model="active" @click="selectType" color="#075ebb" title-active-color="#0F80F0" title-inactive-color="#999">
      <template v-for="(item,index) in tabs">
      <van-tab v-if="item.name"  :key="index" :name="item.type" :title="item.name + '('+item.sum+')'"></van-tab>
      </template>
    </van-tabs>
  </div>
</template>

<script>
import {Tab, Tabs} from 'vant';

export default {
    name: 'Tab',
    props: {
        tabs: {
            type: Array,
            default: () => []
        },
        activeType: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            active: this.activeType || ''
        };
    },
    components: {
        [Tab.name]: Tab, [Tabs.name]: Tabs
    },
    methods: {
        selectType(name) {
            this.active = name;
            //将事件再抛出去
            this.$emit('selectType', name);
        }
    },
    watch: {
        activeType(val) {
            this.active = val;
        }
    }

};
</script>

<style scoped lang="less">
  /deep/.van-tabs__line{
    width: 50px
  }
  .tab-container{
    background-color: #fff;
  }
</style>
